<template>
  <h1>hello vue3</h1>
  <Child :count="count" :setCount="setCount" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
/*
  组件通信

    组件关系：
      父子组件
      兄弟组件
      祖孙组件

    通信方式

      1. props
      2. 自定义事件
      3. 全局事件总线 / pubsub
        vue3移除了$on/$off/$once三个API
        局限性：
          1. 两个通信的组件必须同时存在
          2. 多个组件都需要使用数据，操作很麻烦
        
        社区：mitt / pubsub
      4. v-bind:xxx.sync
        vue3移除了.sync
      5. v-model
      6. vuex / pinia
      7. slot 插槽
      8. $attrs / $listeners / $parent / $children
        $listeners $children vue3移除了
      9. provide / inject
      10. ref

    总结vue3中：
      1. props  
        父 -> 子
      2. 自定义事件
        子 -> 父
      3. v-model
        父 <-> 子
      4. vuex / pinia
        兄弟 / 祖孙
      5. slot 插槽
        父 <-> 子，通信的是标签数据
*/
import Child from "./Child.vue";

export default defineComponent({
  name: "App",
  components: {
    Child,
  },
  // 数据源在哪，更新数据的方法就定义在哪？
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    setCount() {
      this.count++;
    },
  },
});
</script>

<style scoped></style>
